<template>
  <div>
    <a-modal v-model:visible="visible" :width="800" title="新增货险" :bodyStyle="bodyStyle"  @ok="submitForm">
      <a-form :model="formState" ref="formMain" labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="16">
          <a-col :span="9" :style="{paddingBottom: '10px'}">
            <a-form-item name="dragger" no-style>
              <a-upload-dragger v-model:fileList="fileList"
                                :max-count="1"
                                :action="action"
                                :data="{contractType: 'con_insurance_goods'}"
                                :beforeUpload="beforeUpload"
                                @change="postFile"
                                name="file"
                                accept=".pdf">
                <div class="dragger-img">
                  <img src="@/assets/images/ResourceContract/file.png" alt="">
                </div>
                <p class="ant-upload-text" :style="{color: '#2C3749'}">将文件拖到此处，或 <span :style="{color: '#0062AD'}">点击上传</span> </p>
                <p class="ant-upload-hint" :style="{color: '#6B7A8B', fontSize: '14px'}" >只支持pdf格式</p>
              </a-upload-dragger>
            </a-form-item>
          </a-col>
          <a-col :span="15">
            <div class="form-item-border">
              <a-form-item label="贸易主体" name="tradeBody" :rules="[{ required: true, message: '请选择贸易主体' }]">
                <a-select :bordered="false" v-model:value="formState.tradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="合同签订日期" name="signingDate" :rules="[{ type: 'string', required: true, message: '请输入合同签订日期' }]">
                <a-date-picker :locale="locale" :bordered="false" :style="{width: '100%'}" v-model:value="formState['signingDate']"  value-format="YYYY-MM-DD" />
              </a-form-item>
            </div>
            <div class="form-item-border" >
              <a-form-item label="被保险人" name="assured" :rules="[{ required: true, message: '请输入被保险人' }]">
                <a-input :bordered="false" v-model:value="formState.assured" placeholder="请输入被保险人"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="承保人" name="insurer" :rules="[{ required: true, message: '请输入承保人' }]">
                <a-input :bordered="false" v-model:value="formState.insurer" placeholder="请输入承保人"/>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="保险标的及其类别" :labelCol="{span: 7}" name="targetAndType" :rules="[{ required: true, message: '请输入保险标的及其类别' }]">
                <a-input :bordered="false" v-model:value="formState.targetAndType" placeholder="请输入保险标的及其类别"/>
              </a-form-item>
            </div>
<!--            <div class="form-item-border">-->
<!--              <a-form-item label="全年/合同预计额" :labelCol="{span: 7}" name="expectedAmount" :rules="[{ required: true, message: '请输入全年/合同预计额' }]">-->
<!--                <a-input-number :bordered="false" v-model:value="formState.expectedAmount" :style="{width: '100%'}" placeholder="请输入全年/合同预计额"  :min="1" >-->
<!--                  <template #addonAfter>-->
<!--                    <a-select  style="width: 100px" v-model:value="formState.currency">-->
<!--                      <a-select-option :value="1">美元</a-select-option>-->
<!--                      <a-select-option :value="2">人民币</a-select-option>-->
<!--                      <a-select-option :value="3">欧元</a-select-option>-->
<!--                    </a-select>-->
<!--                  </template>-->
<!--                </a-input-number>-->
<!--              </a-form-item>-->
<!--            </div>-->
            <div class="form-item-border">
              <a-form-item label="服务期限" name="servicePeriod" :rules="[{ required: true, message: '请输入服务期限' }]">
                <a-input-number v-model:value="formState.servicePeriod" :bordered="false" :style="{width: '100%'}" addon-after="年" placeholder="请输入服务期限"  :min="1"  />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="预计全年/合同的保险费" :labelCol="{span: 10}" name="expectedInsurancePrice" :rules="[{ required: true, message: '请输入预计全年/合同的保险费' }]">
                <a-input-number :bordered="false" v-model:value="formState.expectedInsurancePrice" :style="{width: '100%'}" placeholder="请输入预计全年/合同的保险费"  :min="1" >
                  <template #addonAfter>
                    <a-select  style="width: 100px" v-model:value="formState.currency">
                      <a-select-option :value="1">美元</a-select-option>
                      <a-select-option :value="2">人民币</a-select-option>
                      <a-select-option :value="3">欧元</a-select-option>
                    </a-select>
                  </template>
                </a-input-number>
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item name="priceRate" label="保险费率" :rules="[{ required: true, message: '请输入保险费率' }]">
                <a-input-number :style="{width: '100%'}"
                                :min="0"
                                :max="100"
                                addon-after="%"
                                placeholder="请输入"
                                :bordered="false"
                                v-model:value="formState.priceRate"
                />
              </a-form-item>
            </div>

            <div class="form-item-border">
              <a-form-item label="到期时间" name="expirationDate" :rules="[{ required: true, message: '请输入到期时间' }]">
                <a-date-picker :locale="locale" :bordered="false" :style="{width: '100%'}"
                               v-model:value="formState['expirationDate']"
                               value-format="YYYY-MM-DD" />
              </a-form-item>
            </div>
            <div class="form-item-border">
              <a-form-item label="支付时间" name="expirationDate" :rules="[{ required: true, message: '请输入支付时间' }]">
                <a-input-number :bordered="false" :style="{width: '100%'}" v-model:value="formState.payDays" placeholder="请输入支付时间"  :min="1">
                  <template #addonAfter>
                    <a-select  style="width: 100px" v-model:value="formState.payDaysType">
                      <a-select-option :value="1">工作日</a-select-option>
                      <a-select-option :value="2">自然日</a-select-option>
                    </a-select>
                  </template>
                </a-input-number>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <template #footer>
        <div class="from-btn-right">
          <a-button key="back" class="border-btn" @click="cacelModel">取消</a-button>
          <a-button key="submit" @click="submitForm" :loading="confirmLoading" class="search-btn1">保存</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, getCurrentInstance, defineEmits, reactive} from "vue";
import { message } from 'ant-design-vue';
const { proxy  } = getCurrentInstance()
import {BASE_URL} from '@/config/proxyIp'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import 'dayjs/locale/zh-cn';
const emit = defineEmits(['saveForm'])
const visible = ref(false);
const isSubmit = ref(false)
const bodyStyle = ref({})
const fileList = ref([])
const action = ref(`${BASE_URL}/con/common/uploadContractWithAnalysis`)
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
  {
    label: '国贸&新贸',
    value: 3
  },
])
const labelCol = ref(
    {
      style: {
        width: '100px'
      },
    },
)

const wrapperCol = ref({
  span: 20
})
const formState = reactive({
  contractName: '', // 合同名称
  contractNumber: '', // 合同编号
  tradeBody: undefined, // 贸易主体(国贸、新贸)
  signingDate: '', // 签订日期
  assured: '', // 被保险人
  insurer: '', // 承保人
  targetAndType: '', // 保险标的及类别
  expectedAmount: '', // 全年/合同预计额
  currency: 1, // 币种
  servicePeriod: '', // 服务期限(单位年)
  price: '', // 保险费
  priceRate: '', // 保险费率
  expirationDate: '', // 到期时间
  payDays: '', // 支付时间（天）
  payDaysType: 1, // 支付时间（天）类型，自然日/工作日
  createDate: '', // 创建时间
  createBy: '', // 创建人
  filePath: '',
  expectedInsurancePrice: ''
})
const formMain = ref()
const showModal = () => {
  visible.value = true;
  fileList.value = []
  isSubmit.value = false
};
const cacelModel = () =>{
  visible.value = false
  isSubmit.value = false
  fileList.value = []
  formMain.value.resetFields()
}
const confirmLoading = ref(false)
const submitForm = () => {
  if(formState.filePath) {
    formMain.value.validateFields().then(() => {
      confirmLoading.value = true
      proxy.$api.postCargoInsurance(formState).then(res => {
        console.log('提交成功了', res)
        visible.value = false;
        isSubmit.value = true
        confirmLoading.value = false
        emit('saveForm', isSubmit.value)
        formMain.value.resetFields()
      })
    })
  } else {
    message.error('请上传合同原件')
  }
}
const postFile = (info) => {
  console.log('上传文件1', info)
  const status = info.file.status
  if (status === 'done') {
    formState.filePath = info.file.response.resultObject.path
  } else if (status === 'error') {
    message.error(`${info.file.name} 文件上传失败`);
  }
}
const beforeUpload = (file) => {
  console.log('上传文件2', file)
  let houzui = file.name.substring(file.name.lastIndexOf('.'), file.name.length).toLowerCase()
  let res = ['.pdf'].includes(houzui)
  if (!res) {
    fileList.value = []
    message.error('请上传 PDF 文件')
  }
  return res
}
// eslint-disable-next-line no-undef
defineExpose({
  showModal
})
</script>

<style lang="scss" scoped>
.form-item-flex {
  display: flex;
  justify-content: space-between;
  .form-item-border {
    margin-right: 4px;
  }
}
.from-btn-right {
  height: 62px;
  line-height: 62px;
  background: #ffffff;
  // box-shadow: 0px -4px 9px 0px rgba(0,0,0,0.09);
}
.dragger-img {
  margin-top: 40%;
  img {
    width: 114px;
    height: 110px;
  }
}
</style>
